<!DOCTYPE html>
<html lang="ko"><head><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" HREF="favicon.ico">
    <title>vis.js - Layout 문서.</title>

    <!-- Bootstrap core CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <!-- Tipue vendor css -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/Tipue-Search/5.0.0/tipuesearch.css" rel="stylesheet">

    <link href="../../common-docs-files/css/style.css" rel="stylesheet">
    <link href="../css/overrides.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scroll/12.1.5/js/smooth-scroll.min.js"></script>
    <script language="JavaScript">
        smoothScroll.init();
    </script>
    
    <!-- Tipue vendor css -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/Tipue-Search/5.0.0/tipuesearch.css" rel="stylesheet">
    
    <script type="text/javascript" src="../../common-docs-files/js/toggleTable.js"></script>
</head>
<body onload="prettyPrint();">
<!-- NAVBAR
================================================== -->
<body>

<div class="navbar-wrapper">
    <div class="container">
        <nav class="navbar-inverse navbar-static-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                            aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                    </ul>
                    <form class="navbar-form navbar-right" role="search">
                        <input name="q" id="tipue_search_input" autocomplete="off" type="text" class="form-control" placeholder="Keyword 입력">
                        <button type="button" class="btn btn-default" onclick="vis.initSiteSearch(true);">검색</button>
                    </form>
                    <div id="search-results-wrapper" class="panel panel-default">
                      <div class="panel-body">
                        <div id="tipue_search_content"></div>
                      </div>
                    </div>
                    <div id="keyword-info" class="panel panel-success">
                      <div class="panel-body">
                          Found <span id="keyword-count"></span> results. Click <a id="keyword-jumper-button" href="">here</a> to jump to the first keyword occurence!
                      </div>
                    </div>
                </div>
            </div>
        </nav>
    </div>
</div>

<div class="container full">
    <h1>Network - layout</h1>
    <p>canvas 위에서 보는 카메라 역할을 합니다. 애니메이션 확대/축소 및 포커싱을 수행합니다.</p>
    <h3>옵션</h3>
    <p> layout 모듈의 옵션은 'layout'이라는 제목의 object에 포함되어야 합니다.</p>
    <p>전체 옵션 혹은 요약 옵션을 클릭하여 사용하는 방법을 표시합니다.</p>
    <ul class="nav nav-tabs">
        <li role="presentation" class="active" onclick="toggleTab(this)"><a href="#">옵션 숨기기</a></li>
        <li role="presentation" onclick="toggleTab(this);" targetNode="fullOptions"><a href="#">전체 옵션</a></li>
        <li role="presentation" onclick="toggleTab(this);" targetNode="shortOptions"><a href="#">요약 옵션</a></li>
    </ul>
    <br>
<pre class="prettyprint lang-js options top hidden" id="fullOptions">
// 모든 옵션들 입니다.
var options = {
  layout: {
    randomSeed: undefined,
    improvedLayout:true,
    clusterThreshold: 150,
    hierarchical: {
      enabled:false,
      levelSeparation: 150,
      nodeSpacing: 100,
      treeSpacing: 200,
      blockShifting: true,
      edgeMinimization: true,
      parentCentralization: true,
      direction: 'UD',        // UD, DU, LR, RL
      sortMethod: 'hubsize',  // hubsize, directed
      shakeTowards: 'leaves'  // roots, leaves
    }
  }
}

network.setOptions(options);
</pre>

<pre class="prettyprint lang-js options top hidden" id="shortOptions">
// 단축 옵션만 표시합니다.
var options = {
  layout:{
    hierarchical: true
  }
}

network.setOptions(options);
</pre>
    <p>hierarchical layout을 사용하도록 설정한다면, 다른 옵션 중 일부를 재정의합니다. physics는 hierarchical repulsion solver로 설정되고 동적 곡선 Edge는 정적 곡선 Edge로 변환됩니다.</p>
    <table class="options" id="optionTable">
        <tr><th>이름</th><th>Type</th><th>Default</th><td>설명</td></tr>
        <tr><td>randomSeed</td><td>Number</td><td><code>undefined</code></td>               <td>hierarchical layout을 사용하지 않는 경우, Node들은 처음에 랜덤하게 배치됩니다. 매번 결과가 다르다는 의미입니다. 랜덤 시드를 수동으로 제공하는 경우 layout이 매번 동일합니다. 정의되지 않은 시드로 시도하고 layout이 마음에 들면 <code>getSeed()</code>를 이용해 시드를 확인하는 것이 좋습니다.</td></tr>
        <tr id="layout"><td>improvedLayout</td><td>Boolean</td><td><code>true</code></td>   <td>활성화가 되면 Network는 초기 layout에 Kamada Kawai 알고리즘을 사용합니다. Node가 100개 이상인 Network의 경우 Node를 줄이기 위해 클러스터링이 자동으로 수행됩니다. (리프 Node가 적거나 없음), 이것이 작동하지 않을 수 있으며 이전 메소드로 돌아갑니다. 이는 개선될 것입니다.</td></tr>
        <tr><td>clusterThreshold</td><td>Number</td><td><code>150</code></td>               <td><code>improvedLayout</code>이 적용되는 클러스터 임계값입니다.</td></tr>
        <tr class='toggle collapsible' onclick="toggleTable('optionTable','hierarchical', this);"><td><span parent="repulsion" class="right-caret"></span> hierarchical</td><td>Object or Boolean</td><td><code>Object</code></td>      <td>True이면, layout 엔진은 기본 설정을 사용하여 Node를 hierarchical 방식으로 배치합니다. 사용자 설정을 위해 object를 제공할 수 있습니다.</td></tr>
        <tr parent="hierarchical" class="hidden"><td class="indent">hierarchical.enabled</td><td>Boolean</td><td><code>false</code></td>        <td>hierarchical layout 시스템의 사용을 전환합니다. 이 옵션이 정의되지 않은 경우 이 object의 속성 중 하나가 true로 정의됩니다. </td></tr>
        <tr parent="hierarchical" class="hidden"><td class="indent">hierarchical.levelSeparation</td><td>Number</td><td><code>150</code></td>   <td>서로 다른 레벨 사이의 거리입니다.</td></tr>
        <tr parent="hierarchical" class="hidden"><td class="indent">hierarchical.nodeSpacing</td><td>Number</td><td><code>100</code></td>       <td>자유 축의 Node간의 최소 거리입니다. 이것은 처음 layout에만 해당됩니다. physics를 활성화하면 해당 Node 거리가 유효 Node 거리로 변경됩니다.</td></tr>
        <tr parent="hierarchical" class="hidden"><td class="indent">hierarchical.treeSpacing</td><td>Number</td><td><code>200</code></td>       <td>서로 다른 트리 사이의 거리 (독립된 Network들) 입니다. 이것은 처음 layout에만 해당됩니다. physics를 활성화하면, repulsion 모델은 트리 사이의 거리를 나타냅니다.</td></tr>
        <tr parent="hierarchical" class="hidden"><td class="indent">hierarchical.blockShifting</td><td>Boolean</td><td><code>true</code></td>    <td>공백을 줄이는 방법입니다. 단독으로 사용하거나, Edge 최소화와 함께 사용할 수 있습니다. 각 Node는 공백을 확인하고 모든 레벨의 Node spacing에 따라 가능한 한 부분을 이동시킵니다. 이는 주로 첫 layout을 위한 것입니다. physics를 활성화하면 physics에 의해 layout이 결정됩니다. 하지만 이것은 안정화 시간을 크게 단축할 것입니다!</td></tr>
        <tr parent="hierarchical" class="hidden"><td class="indent">hierarchical.edgeMinimization</td><td>Boolean</td><td><code>true</code></td> <td>공백을 줄이는 방법입니다. 단독으로 사용하거나 block shifting과 함께 사용할 수 있습니다. block shifting을 활성화하면 일반적으로 layout 프로세스의 속도가 빨라집니다. 각 Node는 각 Edge의 총 길이를 줄이기 위해 자유 축을 따라 이동하려고 시도합니다. 이것은 주로 첫 layout을 위한 것입니다. physics를 활성화하면 physics에 의해 layout이 결정됩니다. 하지만 이것은 안정화 시간을 크게 단축시킬 것입니다!</td></tr>
        <tr parent="hierarchical" class="hidden"><td class="indent">hierarchical.parentCentralization</td><td>Boolean</td><td><code>true</code></td> <td>True이면 layout 알고리즘 완료된 후 상위 Node의 중심이 다시 맞춰집니다.</td></tr>
        <tr parent="hierarchical" class="hidden"><td class="indent">hierarchical.direction</td><td>String</td><td><code>'UD'</code></td>        <td>hierarchical layout의 방향입니다. 사용 가능한 옵션은 <code>UD, DU, LR, RL</code>입니다. 이 단어들의 요약입니다. up-down, down-up, left-right, right-left.</td></tr>
        <tr parent="hierarchical" class="hidden"><td class="indent">hierarchical.sortMethod</td><td>String</td><td><code>'hubsize'</code></td>  <td>데이터를 기반으로 Node의 레벨을 확인하는 데 사용하는 알고리즘입니다. 가능한 옵션: <code>hubsize, directed</code>. <br><br>
            Hubsize는 가장 많은 Edge를 가진 Node를 최상단에 배치합니다. 이를 통해 나머지 층이 계산됩니다. <br><br>
            Edge 데이터로 연결됩니다. A->B 그래서 B는 A보다 낮은 레벨입니다.</td></tr>
        <tr parent="hierarchical" class="hidden"><td class="indent">hierarchical.shakeTowards</td><td>String</td><td><code>'roots'</code></td>        <td> layout에서 모든 루트가 가능한 상위 및 하위 Node에 정렬되어야 하는지(<code>roots</code>) <code>directed</code> 또는 모든 leaf가 하단에 정렬되어 있고  부모(<code>leaves</code>, default)가 가능한 자식에게 근접해야 하는지 여부를 제어합니다.</td></tr>
    </table>

    <div class="flagbar">
      <a href="../../docs/network/layout.html"><span class="flag en"></span></a>
      <a href="../../docs-kr/network/layout.html"><span class="flag kr"></span></a>
    </div>
</div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../common-docs-files/js/ie10-viewport-bug-workaround.js"></script>
<!-- jquery extensions -->
<script src="../../common-docs-files/js/jquery.highlight.js"></script>
<script src="../../common-docs-files/js/jquery.url.min.js"></script>
<!-- Tipue vendor js -->
<script src="../../common-docs-files/js/tipuesearch.config.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Tipue-Search/5.0.0/tipuesearch.min.js"></script>
<!-- controller -->
<script src="../../common-docs-files/js/main.js"></script>
